<template>
  <transition name="drawer">
    <div class="scorllBox" v-if="showDrawer">
      <div class="drawer">
        <div class="primary-retract" @click="open(false)">
          <span>收</span>
          <span>起</span>
          <span class="white"
            ><el-icon color="#409eff" size="10"><ArrowRight /></el-icon
          ></span>
        </div>
        <div class="drawer-content" v-loading="isLoading">
          <CustomerDetail
            :customerObj="customerObj"
            v-if="customerObj"
            :mathKey="mathKey"
            @showEdit="showEdit"
            :userItem="userItem"
          />
        </div>
      </div>
    </div>
  </transition>
  <EditTagForm ref="editTagForm" @success="getCustomerTags" :customerObj="customerObj" />
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import CustomerDetail from './components/index.vue'
defineOptions({ name: 'WeCustomerDetail' })
import * as customerApi from '@/api/wecom/customer/index'
import EditTagForm from './components/editTagForm.vue'

const userId = ref('')
const isLoading = ref(false)
const showDrawer = ref(false) // 抽屉的是否展示
const customerObj = ref(null)
const mathKey = ref(0)
const editTagForm = ref(null)
const customerTag = ref([])
const userItem = ref()
const showEdit = () => {
  editTagForm.value.open(userId.value, customerTag.value)
}
/** 打开弹窗 */
const open = async (value, item) => {
  showDrawer.value = value
  if (value) {
    userId.value = item.id
    userItem.value = item
    getCustomerDetails()
  }
}
// 详情
const getCustomerDetails = async () => {
  customerObj.value = await customerApi.getWeCustomer(userId.value)
  mathKey.value = Math.random()
  getCustomerTags()
}
// 客户标签
const getCustomerTags = async () => {
  const data = await customerApi.getCustomerTag({
    weCustomerId: customerObj.value.externalUserId
  })
  customerObj.value.tagList = data
  customerTag.value = data
}
defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
.scorllBox {
  position: fixed;
  bottom: -1px;
  right: 0;
  width: 1440px;
  height: calc(100% - 86px);
  overflow: hidden;
  z-index: 10;
  box-shadow: 5px 5px 5px #888888;
  .drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    z-index: 999;
    $txtFontSize: 13px;
    .primary-retract {
      width: 40px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #0052cc;
      color: #fff;
      border-radius: 4px 0 0 4px;
      margin-top: 20%;
      font-size: $txtFontSize;
      .white {
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 12px;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 5px;
      }
    }
    :deep(.drawer-content) {
      width: 100%;
      background-color: #f5f7f9;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
      display: flex;
      height: 100%;
      overflow: hidden;
    }
  }
}
.drawer-enter-active,
.drawer-leave-active {
  transition: transform 0.8s ease-out;
}
.drawer-enter-from,
.drawer-leave-to {
  transform: translateX(100%);
}
</style>
